<template>
  <div class="search-box show-in-pc">
    <div class="est-switch">
      <div 
        class="est-btn"   
        :class="{'est-btn-active': item.name == selectSearch.name, 'est-btn-focus': inputFocus && item.name == selectSearch.name}"     
        v-for="(item, index) in searList" 
        :id="'searchEst' + index"
        :key="index"
        @click.stop="chooseSearch(item)">
        {{item.name}}
      </div>
    </div>
    <div class="search-input-box">
      <div class="search-input-left" :class="{'search-input-left-focus': inputFocus}">
        <input 
          class="input-class"
          type="text" 
          autofocus 
          autocomplete="off"
          id="searchSugrec"
          placeholder="搜索"
          v-model="searchValue" 
          @focus="inputFocus = true"
          @input="searchInput" 
          @keydown="keydown($event)"
          @keyup.enter="toSearch"/>
        <div>
          <svg-icon v-show="searchValue.length > 0" icon-class="home-search-close" class="input-clear" @click="clearInput"></svg-icon>
          <svg-icon icon-class="home-search-search" class="input-search" @click="toSearch"></svg-icon>
        </div>
      </div>
      <div class="search-sugrec-list" v-show="searchList.length > 0 && inputFocus">
        <div v-for="(item, index) in searchList" :key="index">
          <div :id="'sugrec_' + index" class="search-sugrec-item" :class="{'search-sugrec-item-select' : searchListIndex == index}" @click="selectSugrec(item.q)">{{item.q}}</div>
        </div>
      </div>
    </div>

    <div class="other-search-box">
      <a class="other-search-btn" href='http://v2.h5player.bytedance.com/' target="_blank">视频调试</a>
      <a class="other-search-btn" href='https://developer.aliyun.com/mvn/search' target="_blank">maven</a>
    </div>
  </div> 
</template>

<script>
import BaiduApi from "@/utils/baiduApi.js"
export default {
  data(){
    return{
      inputFocus: true,
      showModol: false,
      searchValue:'',
      searchList:[],
      searchListIndex: -1,

      selectSearch:    {
        tag: "baidu",
        name:'Baidu',
        url:'https://www.baidu.com/s?wd=',
        select: true
      },
      searList:[
        {
          tag: "baidu",
          name:'Baidu',
          url:'https://www.baidu.com/s?wd=',
          select: true
        },
        {
          tag: "google",
          name:'Google',
          url:'https://www.google.com/search?q=',
          select: false
        },
        {
          tag: "baidu_baike",
          name:'百度百科',
          url:'https://baike.baidu.com/item/',
          select: false
        },
        {
          tag: "blog",
          name:'博客搜索',
          url:'',
          select: false
        }
      ],
    }
  },

  mounted(){
    this.$nextTick(() => {
      this.selectSearch = this.searList[0]
      this.interceptClick()
    })
  },

  methods:{
    // 拦截body的所有点击
    interceptClick(){
      document.body.addEventListener('click', (event) => {
        if(event.srcElement.id != 'searchSugrec' && event.srcElement.id.indexOf("searchEst") != 0){
          this.inputFocus = false
        }
      }, true);
    },

    chooseSearch(value){
      this.selectSearch = value
      this.showModol = false
      // 获取焦点
      document.getElementById("searchSugrec").focus()
      // 变更tag
      this.$emit('changeTag', this.selectSearch.tag)
    },

    toSearch(){
      if(this.selectSearch.tag == "blog"){
        this.$emit('searchBlog', this.searchValue)
      }else {
        if(this.searchValue){
          window.open(this.selectSearch.url + this.searchValue)
        }
      }
    },

    keydown(ev){
      switch(ev.keyCode){
        // 上
        case 38:
          if(this.searchListIndex > 0){
            --this.searchListIndex
            this.searchValue = this.searchList[this.searchListIndex].q
          }
          break
        
        // 下
        case 40:
          if(this.searchListIndex < 9 && this.searchListIndex < this.searchList.length - 1){
            ++this.searchListIndex
            this.searchValue = this.searchList[this.searchListIndex].q
          } 
          break
      }
  	},

    selectSugrec(value){
      this.searchValue = value
    },

    clearInput(){
      this.searchValue = ''
      this.searchList = []

      if(this.selectSearch.tag == "blog"){
        this.$emit('clearList')
      }
    },

    searchInput(){
      if(this.selectSearch.tag != "blog"){
        if(this.searchValue && this.searchValue.length > 0){
          let oldSearchValue = this.searchValue
          this.$axios.get(BaiduApi.SUGREC + `?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=${this.searchValue}&req=2&csor=1`).then(data => {
            if(oldSearchValue == this.searchValue){
              if(data.g && data.g.length > 0){
                this.searchList = data.g
              }else{
                this.searchList = []
              }
            }
          }).catch(res => {
            this.searchList = []
          })
        }else{
          this.searchList = []
        }
      }

      // 通知变更输入值
      this.$emit('changeValue', this.searchValue)
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.search-box{
  padding-top: 50px;
  position: relative;
  max-width: 80vw;

  .est-switch{
    .flex();
    .est-btn{
      user-select: none;
      position: relative;
      font-size: 15px;
      font-weight: 500;
      height: 36px;
      text-align: center;
      cursor: pointer;
      padding: 6px 20px;
      color: #666666;
      transition: all .1s;
      letter-spacing: 1px;
      background: white;
      z-index: 1;
      
      &::after{
        content: '';
        position: absolute;
        top: 4px;
        right: 0;
        bottom: 0px;
        left: 0;
        z-index: -1;
        transform: scale(1.1,1.3) perspective(.5em) rotateX(2.2deg);
        transform-origin: bottom left;
        background:#EAEAEA;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
      }

      &:hover{
        &::after{
          background:#F1F1F1;
        }
      }
    }

    .est-btn-active{
      color: black;
      cursor: pointer;
      z-index: 2;

      &::after{
        border: 1px #eeeeee solid;
        border-bottom: none;
        background: white;
        bottom: -1px;
      }

      &:hover{
        &::after{
          background: white;
        }
      }
    }

    .est-btn-focus{
      z-index: 2;
      &::after{
        border: 1px #4b9cf5 solid !important;
        border-bottom: none !important;
        bottom: -1px;
      }
    }
  }

  .search-input-box{
    height: 40px;
    width: 700px;
    background: white;
    .flex();
    position: relative;

    .search-sugrec-list{
      position: absolute;
      z-index: 1;
      right: 0px;
      left: 0px;
      top: 0px;
      margin-top: 40px;
      overflow: hidden;
      background-color: #2a2a2a;
      transition: all 0.2s linear;

      .search-sugrec-item{
        font-size: 15px;
        color: #bbbbbb;
        padding: 7px 10px 7px 20px;
        cursor: pointer;
        transition: all 0.1s linear;

        &:hover{
          background-color: #3a3a3a;
          // background-color:rgba( 64, 72, 93, 0.9);
        }
      }
      .search-sugrec-item-select{
        background-color: #3e3e3e;
        // background-color:rgba( 64, 72, 93, 1);
      }
    }

    .search-input-left-focus{
      border: 1px solid #4b9cf5 !important;
    }

    .search-input-left{
      flex: 1;
      height: 40px;
      border: 1px solid #eeeeee;
      .flex-center-start();
      padding: 0 10px;

      input {
        flex: 1;
        height: 35px;
        font-size: 14px;
        color: #333333;
        background-color: transparent;
        
        &::placeholder{
          color: #888888;
        }
      }

      .input-clear{
        transition: all 0.2s linear;
        font-size: 25px;
        padding: 5px;
        cursor: pointer;
        color: #aaaaaa;
      }

      .input-search{
        transition: all 0.2s linear;
        font-size: 22px;
        cursor: pointer;
        color: #aaaaaa;
      }
    }
  }

  .other-search-box{
    user-select: none;
    position: absolute;
    right: 0px;
    top: 60px;
    .flex();

    .other-search-btn{
      cursor: pointer;
      font-size: 12px;
      color: #aaa;
      margin-left: 10px;

      &:hover{
        color: #4b9cf5;
      }
    }
  }
}
</style>